<template>
  <div class="home">
    <!-- 顶部 -->
    <chart-top :homeDate='homeDate'></chart-top>
    <!-- 中间 -->
    <chart-main :x="homeDate.orderFullYearAxis"  :saleArr="homeDate.orderFullYear" :visiteArr="homeDate.userFullYear" :orderRank="homeDate.orderRank" :userRank="homeDate.userRank"></chart-main>
    <!-- 底部 -->
    <chart-footer :searchWord="homeDate.searchWord"></chart-footer>
  </div>
</template>

<script setup lang="ts">
//引入请求函数
import { reqChartsData } from "../../api/home/home";
//引入相应的子组件
import ChartTop from "./ChartTop/index.vue";
import ChartMain from "./ChartMain/index.vue";
import ChartFooter from "./ChartFooter/index.vue";
//引入钩子
import { onMounted,ref } from "vue";
//测试mock数据能否获取到
onMounted(() => {
    homeList()
})
let homeDate = ref({})
const homeList = async()=>{
    let reasult = await reqChartsData()
    console.log(reasult)
    homeDate.value=reasult
}
</script>

<style scoped>
.home{
  width: 100%;
  height: 100%;
  /**渐变**/
  background-image:linear-gradient(to right,white,#bbb,white);
}
</style>